<script setup>

const inputValue = ref('')
const loadTodos = () => {
  const savedTodos = localStorage.getItem('todoItems')
  if (savedTodos) {
    return JSON.parse(savedTodos)
  }
  return [
    { id: Date.now() - 2, todo: '完成Vue3项目', isDone: true },
    { id: Date.now() - 1, todo: '学习Pinia状态管理', isDone: false },
    { id: Date.now(), todo: '实现响应式UI设计', isDone: false }
  ]
}

const todos = ref(loadTodos())

// 监听todos变化，自动保存到localStorage
watch(
  todos,
  (newTodos) => {
    localStorage.setItem('todoItems', JSON.stringify(newTodos))
  },
  { deep: true }
)

// 计算属性
const totalCount = computed(() => todos.value.length)
const completedCount = computed(() => todos.value.filter(todo => todo.isDone).length)
const isAllCompleted = computed(() => totalCount.value > 0 && totalCount.value === completedCount.value)

// 方法
const addTodo = () => {
  if (!inputValue.value.trim()) return

  todos.value.unshift({
    id: Date.now(),
    todo: inputValue.value.trim(),
    isDone: false
  })
  inputValue.value = ''
}

const deleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

const clearInput = () => {
  inputValue.value = ''
}

const toggleAll = () => {
  const isAllChecked = isAllCompleted.value
  todos.value.forEach(todo => {
    todo.isDone = !isAllChecked
  })
}

const clearCompleted = () => {
  todos.value = todos.value.filter(todo => !todo.isDone)
}
</script>

<template>
  <div class="todo-container">
    <!-- 添加任务区域 -->
    <div class="todo-header">
      <el-input
        placeholder="请输入待办事项..."
        v-model="inputValue"
        @keyup.enter="addTodo"
        :maxlength="30"
      >
        <template #suffix>
          <el-icon
            class="clear-icon"
            v-if="inputValue"
            @click="clearInput"
          >
            <i-ep-CircleCloseFilled />
          </el-icon>
        </template>
      </el-input>
      <el-button
        type="primary"
        class="add-button"
        @click="addTodo"
      >
        <span>添加</span>
      </el-button>
    </div>

    <!-- 任务列表 -->
    <div class="todo-list">
      <transition-group
        name="todo-item"
        enter-active-class="todo-item-enter-active"
        leave-active-class="todo-item-leave-active"
      >
        <div
          class="todo-item"
          v-for="todoObj in todos"
          :key="todoObj.id"
        >
          <div class="todo-content">
            <el-checkbox v-model="todoObj.isDone">
              <span :class="{ 'todo-completed': todoObj.isDone }">{{
                todoObj.todo
              }}</span>
            </el-checkbox>
          </div>
          <el-button
            type="danger"
            class="delete-button"
            @click="deleteTodo(todoObj.id)"
          >
            <span>删除</span>
          </el-button>
        </div>
      </transition-group>

      <!-- 空状态提示 -->
      <div
        v-if="todos.length === 0"
        class="empty-state"
      >
        <el-empty description="暂无待办事项，添加一个吧！" />
      </div>
    </div>

    <!-- 底部操作区域 -->
    <div class="todo-footer">
      <span class="todo-count">已完成: {{ completedCount }} / 全部: {{
        totalCount }}</span>
      <div v-if="todos.length > 0">
        <el-button
          type="primary"
          v-if="!isAllCompleted"
          @click="toggleAll"
        >
          <span>全选</span>
        </el-button>
        <el-button
          type="danger"
          v-else
          @click="toggleAll"
        >
          <span>取消全选</span>
        </el-button>
        <el-button
          type="danger"
          @click="clearCompleted"
          :disabled="completedCount === 0"
        >
          <span>清除已完成</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 容器样式 */
.todo-container {
  width: 750px;
  height: 550px;
  border-radius: 16px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.todo-container:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 添加任务区域 */
.todo-header {
  display: flex;
  width: 100%;
  gap: 12px;
}

.todo-header .el-input {
  flex: 1;
  height: 40px;
  font-size: 15px;

}

:deep(.el-input__wrapper) {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;

}

.todo-header .el-input .clear-icon {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 20px;
  margin-right: 0;
  transition: color 0.3s ease;
}

.todo-header .el-input .clear-icon:hover {
  color: var(--text-color);
}

.todo-header .add-button {
  height: 40px;
  white-space: nowrap;
  font-size: 15px;
  transition: all 0.3s ease;
}

.todo-header .add-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 任务列表 */
.todo-list {
  flex: 1;
  border-radius: 12px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  position: relative;
}

/* 任务项 */
.todo-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  /* 确保flex布局正常工作 */
  min-height: 40px;
}

.todo-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.todo-item:hover {
  border-color: var(--primary-color);
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.todo-item:hover::before {
  background-color: var(--primary-color);
}

/* 任务内容区域 - 解决文本过长问题 */
.todo-content {
  flex: 1;
  margin-right: 12px;
  overflow: hidden;
  min-width: 0;
}

.todo-content .el-checkbox {
  display: flex;
  align-items: center;
  min-width: 0;
}

.todo-content .el-checkbox__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.todo-item .todo-completed {
  text-decoration: line-through;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.todo-item .delete-button {
  padding: 6px 16px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.todo-item .delete-button:hover {
  opacity: 1;
  transform: translateY(-1px);
}


/* 原生CSS动画定义 */
@keyframes todo-item-enter {
  from {
    opacity: 0;
    transform: translateX(100%) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes todo-item-leave {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.todo-item-enter-active {
  animation: todo-item-enter 0.5s ease-out;
}

.todo-item-leave-active {
  animation: todo-item-leave 0.5s ease-in;
  position: absolute;
  width: calc(100% - 40px);
  z-index: 1;
}

/* 添加新的CSS规则处理列表项重排 */
.todo-list>div {
  position: relative;
}

.todo-list>div>div:not(.empty-state) {
  /* 使用过渡效果处理下方元素上移 */
  transition: transform 0.5s ease-out;
}


/* 底部操作区域 */
.todo-footer {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  padding: 8px 20px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.todo-footer .todo-count {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.todo-footer>div {
  display: flex;
  gap: 12px;
}

.todo-footer .el-button {
  font-size: 13px;
  padding: 6px 16px;
  transition: all 0.3s ease;
}

.todo-footer .el-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.todo-footer .el-button:disabled {
  opacity: 0.6;
}


/* 响应式设计 */
@media (max-width: 480px) {
  .todo-container {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    padding: 15px;
    margin: 0;
    box-shadow: none;
  }

  .todo-header {
    flex-direction: column;
  }

  .todo-header .el-input,
  .todo-header .add-button {
    width: 100%;
  }

  .todo-footer {
    flex-direction: column;
    height: auto;
    gap: 10px;
    padding: 10px 15px;
  }

  .todo-footer>div {
    width: 100%;
    justify-content: center;
  }
}
</style>